<template>
  <component v-if="isComponents" :is="_type_" ref="ref_component" :readonly="readonly" :is_info="is_info" :is_list="is_list" :size="size" v-bind="thisProps"
             :value="modelValue" @update:value="$emit('update:modelValue', $event)"
             :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)"
             @change="$emit('change', $event)"
  />
  <div v-else-if="_type_!=='hidden'" v-html="modelValue"></div>
</template>

<script lang="ts">
import type {PropType} from "vue";
// @ts-ignore
import {componentConfigMap, componentMap, defineAsyncComponentMap} from "@/components/auto_import/auto_import_tool.js";
// @ts-ignore
import {filter_object} from "@/js/s94_tool.js";

type TypeConfigComponent = {
  name: string;
  title: string;
  tip: string;
  _css_var_: Record<string, string>;
  _head_img_: string;
  _group_: string;
  prop_map: {
    [prop_name:string]: {
      name: string;
      label: string;
      tip: string;
      input_type: string | object;
      is_required: boolean;
      is_boolean: boolean;
      default?: any;
    }
  };
  can_config?: boolean;
  can_form_param_public?: boolean;
  can_form_param?: boolean;
  can_where_param?: boolean;
}

/**
 * 获取页面板块组件配置
 * @returns {Promise<{[componentName: string]:{name,title,tip,can_config,can_form_param_public,can_form_param,can_where_param,param_map:{[propName: string]:{name,label,default,tip,type,input_type,is_required,is_boolean}}}}>}
 */
export async function getComponentConfigMap() {
  // @ts-ignore
  let res:{[component_name:string]: TypeConfigComponent} = await componentConfigMap('UnifyParam');
  return res;
}

export type TypeParamComponents =
'additional'|
'area_4l'|
'checkbox'|
'checkbox_loop'|
'custom_object'|
'date'|
'date_between'|
'datetime'|
'datetime_between'|
'duration'|
'editor'|
'editor_wechat'|
'file'|
'file_img'|
'file_imgs'|
'form_list'|
'iconfont'|
'json_param'|
'json_param_arr'|
'json_param_checkbox'|
'link_info'|
'list_data'|
'list_id'|
'list_ids'|
'log_list'|
'position'|
'radio'|
'radio_switch'|
'radio_switch_group'|
'select_address'|
'select_more'|
'select_one'|
'SelectList'|
'sku'|
'text_between'|
'text_more'|
'text_more_code'|
'text_one'|
'text_one_code'|
'validate_rule'|
'wechat_cert'|
'wechat_file';

export default {
  components: defineAsyncComponentMap('UnifyParam'),
  props: {
    _type_: {
      type: String as PropType<TypeParamComponents | 'hidden' | string>,
      default: ''
    },
    _props_: {
      type: Object,
      default: {}
    },
    modelValue: {
      type: [String,Number,Object,Array],
      default: ''
    },
    readonly: {
      type: Boolean,
    },
    is_info: {
      type: Boolean,
    },
    is_list: {
      type: Boolean,
    },
    size: {
      type: String as PropType<'large' | '' | 'small'>,
      default: '',
    },
  },
  emits: ['update:modelValue', 'change'],
  methods: {
    set_value(val:any){
      // @ts-ignore
      let func = this.$refs.ref_component?.set_value;
      if (typeof func === 'function') func(val);
    }
  },
  computed: {
    isComponents(){
      return this._type_ in this.$options.components;
    },
    thisProps(){
      return filter_object(this._props_, ['onUpdate:modelValue', 'onChange', 'modelValue', 'value'])
    }
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>